<template>
  <div class="common-layout">
    <el-aside class="aside-fixed">
      <div class="logo">
        <div class="lo"><img src="@/assets/logo.jpg" /></div>
        <span>校园慧选管理系统</span>
      </div>
      <div class="line"></div>
      <el-menu class="nav" :default-active="route.path" @select="handleMenuSelect">
        <el-menu-item index="/menu/judge"> <!--审核 -->
          <img style="width: 20px; height: 20px" src="@/assets/images/菜单.svg" />
          审核
        </el-menu-item>
        <div class="line"></div>
        <el-menu-item index="/menu/ranking"> <!-- 投票活动 -->
          <img style="width: 20px; height: 20px" src="@/assets/images/菜单.svg" />
          投票活动
        </el-menu-item>
        <div class="line"></div>
        <el-menu-item index="/menu/notification"> <!-- 通知管理 -->
          <img style="width: 20px; height: 20px" src="@/assets/images/菜单.svg" />
          通知管理
        </el-menu-item>
      </el-menu>
      <div class="line"></div>
      <!-- 系统管理 -->
      <el-menu class="nav" :default-active="route.path" @select="handleMenuSelect">
        <el-sub-menu index="1">
          <template #title>
            <img style="width: 20px; height: 20px" src="@/assets/images/菜单.svg" />
            <span>系统管理</span>
          </template>
          <div class="line"></div>
          <!-- 子菜单项：用户管理 -->
          <el-menu-item index="/menu/user">
            <img style="width: 20px; height: 20px" src="@/assets/images/纸飞机.svg" />
            用户管理
          </el-menu-item>
          <div class="line"></div>
          <!-- 子菜单项：评论管理 -->
          <el-menu-item index="/menu/comment">
            <img style="width: 20px; height: 20px" src="@/assets/images/纸飞机.svg" />
            评论管理
          </el-menu-item>
        </el-sub-menu>
        <div class="line"></div>
      </el-menu>
    </el-aside>
    <!-- 主内容区，包含 header 和 main 内容 -->
    <el-container>
      <el-header class="header-fixed">
        <div class="header">
          <div class="infor-icon">
            <router-link to="/menu/judge">
              <img style="width: 25px; height: 25px" src="@/assets/images/提醒.svg" />
              <div class="notification">
                <span class="number">{{ judgeStore.reviewCount }}</span>
              </div>
            </router-link>
          </div>
          <img style="width: 50px; height: 50px;border-radius: 50%;" v-if="userInfo" :src="userInfo.avatarUrl" />
          <el-dropdown class="dropdown-center">
            <span v-if="userInfo" class="el-dropdown-link">
              你好，{{ userInfo?.name }}
              <el-icon class="el-icon--right">
                <CaretBottom />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <router-link to="/menu/my/userInfor">个人信息</router-link>
                </el-dropdown-item>
                <el-dropdown-item>
                  <div @click="LogOut">退出登录</div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

        </div>
      </el-header>
      <el-main class="main-content">
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router'
import { useJudgeStore, useUserStore } from '@/stores';
import { ElMessageBox } from 'element-plus';

const route = useRoute() // 使用 Vue Router 的 useRoute 钩子来获取当前路径
const router = useRouter() // 使用 useRouter 钩子来进行编程式导航
const judgeStore = useJudgeStore();
const userStore = useUserStore();
const userInfo = computed(() => userStore.getUserInfo() || {});

// 导航菜单选择时调用的函数，使用 router.push 实现跳转
const handleMenuSelect = (index) => {
  if (route.path !== index) {
    router.push(index)
  }
}
//退出登录
const LogOut = () => {
  ElMessageBox.confirm(
    '你确定要退出登录吗?', // 提示文本
    '退出登录', // 确认框标题
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning', // 警告类型的提示框
    }
  )
    .then(() => {
      // 如果用户点击了“确定”，清除用户信息并跳转到登录页面
      useUserStore().clearUserInfo();
      router.push("/");

    })
    .catch(() => {
    });
}


</script>

<style lang="scss" scoped>
/* 通用布局样式 */
.common-layout {
  display: flex;
  height: 100vh;
  /* 确保页面高度为全屏 */
  width: 100vw;
  background-color: #f2f2f2;

}

/* 固定 aside 在左边 */
.aside-fixed {
  width: 200px;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #fff;
  /* 设定背景颜色避免内容与背景混淆 */
  z-index: 10;
  /* 确保 aside 在最前方 */
}

/* 固定 header 在上方 */
.header-fixed {
  width: calc(100% - 200px);
  /* 减去 aside 的宽度 */
  position: fixed;
  top: 0;
  left: 210px;
  /* 让 header 与 aside 对齐 */
  height: 60px;
  background-color: #fff;
  z-index: 9;
  display: flex;
  /* 水平居中对齐 */
  align-items: center;
  /* 垂直居中对齐 */
  justify-content: flex-end;
  /* 将内容推到右侧 */
  align-items: center;
  padding-right: 2%;
}

/* 主内容区 */
.main-content {
  position: fixed;
  /* 固定在页面上 */
  left: 210px;
  /* 与 aside 的右边对齐 */
  top: 70px;
  /* 与 header 的底部对齐 */
  right: 10px;
  /* 距离右侧边框10px */
  bottom: 10px;
  /* 距离底部边框10px */
  background-color: #fff;
  border-radius: 10px;
  z-index: 8;
}

/* LOGO 样式 */
.logo {
  display: flex;
  font-size: 12px;
  align-items: center;
  background: #03a27b;
  height: 50px;

  .lo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    background-color: #fff;
    height: 40px;
    width: 40px;
    color: #034670;
    border-radius: 5px;

    img {
      width: 45px;
    }
  }

  span {
    margin-left: 10px;
    color: #fff;
  }
}

/* 菜单分隔线 */
.line {
  background-color: #f2f2f2;
  height: 1px;
}

/* 左边导航栏样式 */
.nav {

  .el-menu-item {
    display: flex;
    align-items: center;
    color: #999;
    /* 默认字体颜色 */
    background-color: #fff;
    /* 默认背景颜色 */
    cursor: pointer;
    /* 鼠标指针样式 */

    /* 鼠标悬停时的样式 */
    &:hover {
      color: #03a27b;
      background-color: transparent;
    }

    /* 选中时背景颜色为渐变 */
    &.is-active {
      background: #beffef;
      color: #666;
      /* 修改字体颜色 */
    }
  }

  /* el-sub-menu 的样式 */
  .el-sub-menu {
    span {
      color: #999;
      /* 子菜单标题的颜色 */
    }
  }
}

/* 修改 el-menu 的 menu-sub 默认样式 */
.el-menu-item,
.el-sub-menu {
  --el-menu-item-height: 40px;
  --el-menu-sub-item-height: 40px;
  --el-menu-base-level-padding: 3px;
  --el-menu-active-color: #000;
  --el-menu-hover-text-color: #000;

  span[data-v-79060eba] {
    font-size: 15px;
  }
}

/*头部样式*/
.header {
  display: flex;

  .infor-icon {
    display: flex;
    margin-right: 100px;
    margin-top: 10px;


    .notification {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;


      :deep(span) {
        position: absolute;
        background-image: url(../../assets/images/红点.svg);
        /* 将 span 元素的顶部和右侧边缘对齐到其父元素的顶部和右侧边缘 */
        top: -30px;
        right: 0px;
        /* 使用 transform 进行位移调整，确保 span 元素的中心对齐 */
        transform: translate(50%, -50%);
        font-size: 10px;
        color: white;
        background-color: red;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }


}

.dropdown-center {
  height: 15px;

  span {
    margin-left: 5px;
    margin-top: 5px;
    font-size: 12px;
  }
}

/*去除el-dropdown边框*/
:focus-visible {
  outline: none;
}

// 去除超链接样式
a {
  text-decoration: none;
  color: #666;
}

.router-link-active {
  text-decoration: none;

}
</style>